<template>
    <el-dialog title="关联客户" v-model="props.openModal" width="900" @close="emit('close')">
        <div>
            <el-form ref="form" :model="form" label-width="80px" inline>
                <el-form-item label="">
                    <el-input :prefix-icon="Search" placeholder="搜索客户名称"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-select v-model="searchForm.province" class="w-35" placeholder="省份">
                        <el-option v-for="prov in provinceList" :key="prov" :label="prov" :value="prov">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-select v-model="searchForm.city" class="w-25" placeholder="城市">
                        <el-option v-for="city in cityOptions" :key="city.code" :label="city.city" :value="city.city">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="searchForm.orderTakerTeam" class="w-25" multiple placeholder="接单组">
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">搜索</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="data" style="width: 100%" border :row-class-name="tableRowClassName">
                <el-table-column label="序号" type="index" width="60" align="center" />
                <el-table-column label="客户" prop="customer" aling="center" />
                <el-table-column label="接单员" prop="orderTaker" aling="center" />
                <el-table-column label="省份" prop="province" aling="center" />
                <el-table-column label="城市" prop="city" aling="center" />
            </el-table>
        </div>
        <template #footer>
            <el-button @click="emit('close')">取 消</el-button>
            <el-button type="primary" @click="emit('close')">确 定</el-button>
        </template>
    </el-dialog>
</template>
<script setup>
import { computed, watch } from 'vue';
import { cityProvinceOptions, provinceList } from '../../../../../utils/city';
import { Search } from '@element-plus/icons-vue';

const props = defineProps({
    openModal: {
        type: Boolean,
        required: true
    }
})
const searchForm = ref({
    city: '',
    province: ''
})
const data = ref([{
    customer: '',
    orderTaker: '',
    province: '',
    city: '',
    orderTakerTeam: []
}, {
    customer: '',
    orderTaker: '',
    province: '',
    city: '',
    orderTakerTeam: []
}])
const cityOptions = ref([])
watch(() => searchForm.value.province, (val) => {
    let areaObj = cityProvinceOptions.find(item => item.province == val)
    console.log('areaObj', areaObj)
    if (areaObj)
        cityOptions.value = areaObj.cities

})
const emit = defineEmits(['close'])

function tableRowClassName({ row, rowIndex }) {
    if (rowIndex % 2 == 1) {
        return 'gray-row'
    } else {
        return ''
    }
}
// const tableRowClassName = ({
//     row,
//     rowIndex,
// }) => {
//     if (rowIndex === 1) {
//         return 'warning-row'
//     } else if (rowIndex === 3) {
//         return 'success-row'
//     }
//     return ''
// }
</script>
<style>
.el-table .gray-row {
    --el-table-tr-bg-color: #0000000e;
}
</style>